<template>
    <div class="badge-delete-box">
        <div class="badge-delete" v-for="(item, index) in list" :key="index">
            <p :title="item.name || item.templateName">{{item.name || item.templateName}}</p>
            <i class="el-icon-error" v-if="!item.cantDelete" @click="deleteItem(item)"></i>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class BadgeDeleteBox extends Vue {
    @Prop({ required: true }) private list!: object[]

    // 删除
    deleteItem(item: any) {
        this.$emit("deleteItem", item);
    }
}
</script>
<style lang="scss" scoped>
    .badge-delete-box {
        max-height: 76px;
        overflow: auto;
        .badge-delete {
            position: relative;
            display: inline-block;
            height: 26px;
            padding: 5px;
            font-size: 14px;
            border: 1px solid #cfd8dc;
            border-radius: 2px;
            margin: 6px 6px 10px 0;
            p {
                margin: 0;
                max-width: 200px;
                @include textEllipsis();
            }
            .el-icon-error {
                position: absolute;
                font-size: 14px;
                right: -7px;
                top: -7px;
                cursor: pointer;
            }
        }
    }
</style>
